<template>
    <view v-if="cookie" class="mv-container">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar>
		  <template v-slot:title>
			<text>最新MV</text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
		<swiper class="swiper" :interval="2000" vertical circular :duration="500" @change="changeVideo">
		    <swiper-item v-for="(item,index) in mvList" class="swiper-item" @click="playVideo" :key="index">
		        <video class="myvideo" :id="'myvideo'+index" :autoplay="false" :src="item.url" :controls="false" :enable-play-gesture="true"></video>
				<myuni-control class="myuni-control-warp" @controlClick="control" :like="like" :collect="collect"></myuni-control>
				<view class="artist-box">
					<view class="artist-info">
						<image :src="item.cover" :lazy-load="true" mode="widthFix"></image>
						<text class="artist-name">{{item.artistName}}</text>
						<i class="iconfont icon-jushoucang"></i>
					</view>
					<view class="detaile">
						{{item.name}}
					</view>
				</view>
		    </swiper-item>
		</swiper>
		<uni-popup class="comment-prop" ref="comment_popup" type="bottom">
			<scroll-view class="scroll-view_" scroll-y="true" @scrolltolower="scrolltolower" style="height: 600rpx;" :lower-threshold="0">
			    <uni-list>
			        <uni-list :border="false">
			            <uni-list-chat v-for="(item,index) in commentList" :key="item.commentId" :avatar-circle="true" :title="item.nickname" :avatar="item.avatarUrl" :note="item.content" :time="item.time | deteFrom"></uni-list-chat>
			            <uni-load-more class="load-more" :status="loadingStatus" :contentText="contentText"></uni-load-more>
					</uni-list>
			    </uni-list>
			</scroll-view>
			<view class="textare-container">
				<textarea v-model="commentVlue" ref="comment_textarea" class="comment-textarea" placeholder-style="color:#ccc" placeholder="请发表您的评论" @keyup.enter="sendComment" :auto-height="true"/>
			</view>
		</uni-popup>
    </view>
</template>
<script> 
	export default {
	    data() {
	        return {
				pathList:['/mv/first?limit=','/mv/exclusive/rcmd?limit=','/mv/all?limit='],
				currentPath:0,
				playing:true,
				currentUrl:'',
				currentIndex:0,
				mvList:[],
				id:'',
				page:1,
				size:10,
				cpage:1,
				like:false,
				collect:false,
				commentVlue:'',
				commentList:[],
				loadingStatus:'more',
				contentText:{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
	        }
	    },
		onLoad(option) {
			if(!this.cookie){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
			this.id=option.id
			this.cookie&&this.updateLike()
			this.cookie&&this.updateCollect()
			this.request({
				url:'/mv/url?id='+option.id
			}).then(res=>{
				this.currentUrl=res.data.url
				this.mvList.push({url:this.currentUrl,id:this.id})
				if(option.type){
					this.currentPath =option.type
				}
				this.getMv()
				// this.getComment()
			})
		},
		computed:{
			...mapState(['cookie']),
			limit(){
				return this.page*this.size
			}
		},
		onShow() {
			if(!this.cookie){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		},
		mounted() {
			this.videoContext = uni.createVideoContext('myvideo0')
			this.videoContext.play()
		},
		onShareAppMessage(res) {
		    return {
		      title: this.mvList[this.currentIndex].name+'------'+this.mvList[this.currentIndex].artistName,
		      path: '/pages/playmv/playmv?id='+this.id,
			  imageUrl:this.mvList[this.currentIndex].cover,
			  provider: "weixin",
		    }
		 },
	    methods: {
		   getMv(){
				this.request({
					url:this.pathList[this.currentPath]+this.limit
				}).then(res=> {
					res.data.forEach((item,index)=>{
						if(this.id*1 === item.id) {
							this.currentIndex=index
							this.mvList[0]={...this.mvList[0],...{cover:item.cover,artistName:item.artistName,artistId:item.artistId,name:item.name}}
							return false
						}
						this.request({
							url:'/mv/url?id='+item.id
						}).then(resulte=>{
							if(index>=(this.page-1)*this.size){
								this.mvList.push({url:resulte.data.url,id:item.id,cover:item.cover,artistName:item.artistName,artistId:item.artistId,name:item.name})
							}
						})
					})
				})
			},
			getComment(){
				this.request({
					url:'/comment/mv?id='+this.id+"&offset="+(this.cpage-1)*20
				}).then(res=>{
					let commentList=res.comments
					if(!commentList) {
						this.loadingStatus='noMore'
						return false
					}
					commentList = commentList.map(val=>{ return {
						commentId:val.commentId,
						content:val.content,
						nickname:val.user.nickname,
						avatarUrl:val.user.avatarUrl,
						userId:val.user.userId,
						time:val.time
						
					}})
					this.commentList=[...this.commentList,...commentList]
					console.log(this.commentList)
					this.loadingStatus='more'
				})
			},
	       playVideo(){
			   this.playing=!this.playing
			   if(this.playing){
				   this.videoContext.play()
			   }else{
				   this.videoContext.pause()
			   }
		   },
		   changeVideo(val){
			   this.videoContext.pause()
			   this.videoContext = uni.createVideoContext('myvideo'+val.detail.current)
			   this.videoContext.play()
			   console.log("播放",this.videoContext)
			   this.id=this.mvList[val.detail.current].id
			   this.currentIndex=val.detail.current
			   this.commentList=[]
			   this.cookie&&this.updateLike()
			   this.cookie&&this.updateCollect()
			   if((this.mvList.length-val.detail.current)<3){
				   this.page++
				   this.getMv()
			   }
		   },
		   control(type){
			   if(type===1){
				   if(this.like){
				   	this.request({
				   		url:"/resource/like?t=0&type=1&id="+this.id+'&cookie='+this.cookie
				   	}).then(res=>{
				   		console.log(res)
				   	})
				   }else{
				   	this.request({
				   		url:"/resource/like?t=1&type=1&id="+this.id+'&cookie='+this.cookie
				   	}).then(res=>{
				   		console.log(res)
				   	})
				   }
			   }
			   else if(type===2){
				   this.openComment()
				   this.getComment()
			   }
			   else if(type===3){
				   this.share()
			   }
			   else if(type===4){

				   if(this.collect){
				     this.request({
				     	url:"/mv/sub?t=0&mvid="+this.id+'&cookie='+this.cookie
				     }).then(res=>{
						 console.log(res)
				     })
				   }else{
				     this.request({
				     	url:"/mv/sub?t=1&mvid="+this.id+'&cookie='+this.cookie
				     }).then(res=>{
						 console.log(res)
				     })
				   }
			   }
		   },
		   updateLike(){
		   	  this.request({
		   	  	  url:"/playlist/mylike?cookie="+this.cookie
		   	  }).then(res=>{
		   	    this.like=res.data.feeds.some(val=>val.mlogBaseData.id===this.id+'')
		   	  })
			  
		    },
		   updateCollect(){
		   	  this.request({
		   	  	  url:"/mv/sublist?cookie="+this.cookie
		   	  }).then(res=>{
		   	    this.collect=res.data.some(val=>val.vid===this.id+'')
		   	  })
		    },
			sendComment(){
				const userInfo = uni.getStorageSync('userInfo')
				if(!userInfo){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}else{
					let comment={
						nickname:userInfo.profile.nickname,
						avatarUrl:userInfo.profile.avatarUrl,
						time:Date.now(),
						commentId:Date.now(),
						content:this.commentVlue,
					}
					this.commentList.unshift(comment)
					this.$refs.comment_popup.close()
				}
			},
			openComment(){
			  this.$refs.comment_popup.open('bottom')
			},
			scrolltolower(e){
				if(this.cpage>=10) return false
				this.loadingStatus='loading'
				this.cpage++
				this.getComment()
			},
			share(){
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 4,
					mediaUrl:this.mvList[this.currentIndex].url,
					title:'音乐盒',
					imageUrl:this.mvList[this.currentIndex].cover,
				    summary:this.mvList[this.currentIndex].name+'------'+this.mvList[this.currentIndex].artistName,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			}
	    }
	}
</script>
<style lang="scss" scoped>
	.mv-container{
		height: 100vh;
		width: 100vw;
		.swiper{
			width: 100%;
			height: 100%;
			.swiper-item{
				position: relative;
				::v-deep uni-video{
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				::v-deep.uni-video-container{
					width: 100%;
					height: 100%;
				    background-color: white;
				}
				.myuni-control-warp{
					// width: 100px;
					// height: 500px;
				}
				.artist-box{
					position: absolute;
					left: 0;
					bottom: 0;
					padding: 20rpx;
					color: #2b353f;
					/*  #ifdef  MP-WEIXIN  */
					  color: #fff;
					/*  #endif  */
					.artist-info{
						display: flex;
						height: 100rpx;
						align-items: center;
						image{
							width: 80rpx;
							// border-radius: 50%;
						}
						.artist-name{
							margin: 0 10px;
						}
					}
					.detaile{
						max-width: 50%;
						text-align: center;
				        display: -webkit-box;
				        overflow: hidden;
				        -webkit-box-orient: vertical;
				        -webkit-line-clamp: 2;
					}
				}
			}
		}
		.comment-prop{
			
			.scroll-view_{
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				overflow: hidden;
				.load-more{
					background-color: #fff;
				}
			}
			.textare-container{
				padding: 20rpx;
				background-color:#fff;
				.comment-textarea{
					width: 100%;
				}
			}
		}
	}
</style>